<%--
  Created by IntelliJ IDEA.
  User: 吴
  Date: 2023/12/26
  Time: 9:51
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>商品搜索</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="商品详情页面">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!-- Jquery -->
    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/aes_key_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/reception_desk/search.js"></script>
    <!-- CSS -->
    <link href="${pageContext.request.contextPath}/other/style/reception_desk/search.css" rel="stylesheet"
          type="text/css"/>
</head>
<body>
<jsp:useBean id="accountId" scope="request" type="java.lang.String"/>
<jsp:useBean id="name" scope="request" type="java.lang.String"/>
<jsp:useBean id="searchInput" scope="request" type="java.lang.String"/>
<jsp:useBean id="sortColor" scope="request" type="java.lang.Integer"/>
<jsp:useBean id="id" scope="request" type="java.lang.Integer"/>
<!-- jsp:include导入网页导航栏  jsp:param向导航栏传值 -->
<jsp:include page="/WEB-INF/page/reception_desk/navigation_bar.jsp" flush="true">
    <jsp:param name="accountid" value="${accountId}"/>
    <jsp:param name="name" value="${name}"/>
    <jsp:param name="id" value="${id}"/>
</jsp:include>
<div class="body" search-input="${searchInput}" account-id="${accountId}" name="${name}" id="${id}">
    <div class="total">首页 > 全部结果</div>
    <div class="directory">
        <ul class="type">
            <li class="first" style="margin-left: 0;">排序：</li>
            <div class="synthesis comprehensive-sorting" style="${sortColor == 1 ? 'color : #FF6A00' : ''}">全部</div>
            <div class="synthesis chronological-ordering" style="${sortColor == 2 ? 'color : #FF6A00' : ''}">新品</div>
            <div class="synthesis price-sorting" style="${sortColor == 3 ? 'color : #FF6A00' : ''}">价格</div>
        </ul>
    </div>
    <div class="sift-product">
        <jsp:useBean id="commodityPage" scope="request" type="com.xm.entity.Page"/>
        <c:set var="currentPage" value="${commodityPage.pageNumber}"/>
        <c:set var="totalPages" value="${commodityPage.totalPages}"/>
        <div class="row">
            <c:forEach items="${commodityPage.data}" var="commodity">
                <div class="content" commodity-id="${commodity.commodityId}">
                    <div class="image">
                        <img src="http://localhost:8083/resource_packs/images/${commodity.commodityImages}"
                             width="150px"
                             height="150px" alt="">
                    </div>
                    <a>
                            ${commodity.commodityName}
                    </a><br>
                    <a style="font-size: 12px">
                            ${commodity.commodityDescription}
                    </a>
                    <span class="price">${commodity.subtotal}元</span>
                    <c:if test="${commodity.subtotal != commodity.commodityPrice}">
                        <s style="color: #b0b0b0;font-size: 12px">${commodity.commodityPrice}元</s>
                    </c:if>
                </div>
            </c:forEach>
        </div>
    </div>
    <div class="pagination-function">
        <div class="pagination" total-pages="${totalPages}">
            <%-- 计算前后页码 --%>
            <%-- 如果当前页码不是第一页，则显示“首页”和“上一页”按钮 --%>
            <c:if test="${currentPage > 1}">
                <a class="page-button home-page">首页</a>
                <a class="page-button previous" page-number="${currentPage - 1}">上一页</a>
            </c:if>

            <%-- 显示当前页码和总页数 --%>
            <span class="page-info">第 ${currentPage} 页 / 共 ${totalPages} 页</span>

            <%-- 如果总页数大于 7 --%>
            <c:if test="${totalPages > 7}">
                <%-- 如果当前页码小于等于 4，则显示前 5 个页码按钮 --%>
                <c:if test="${currentPage <= 4}">
                    <c:forEach var="i" begin="1" end="5">
                        <c:if test="${i <= totalPages}">
                            <a class="page-button specify-page" page-number="${i}">${i}</a>
                        </c:if>
                    </c:forEach>
                    <%-- 显示省略号 --%>
                    <span class="page-ellipsis">...</span>
                </c:if>

                <%-- 如果当前页码大于总页数减 4，则显示后 5 个页码按钮 --%>
                <c:if test="${currentPage > totalPages - 4}">
                    <%-- 显示省略号 --%>
                    <span class="page-ellipsis">...</span>
                    <c:forEach var="i" begin="${totalPages - 4}" end="${totalPages}">
                        <c:if test="${i <= totalPages}">
                            <a class="page-button specify-page" page-number="${i}">${i}</a>
                        </c:if>
                    </c:forEach>
                </c:if>

                <%-- 如果当前页码在中间位置，则显示当前页码前后各 2 个页码按钮 --%>
                <c:if test="${currentPage > 4 && currentPage <= totalPages - 4}">
                    <%-- 显示省略号 --%>
                    <span class="page-ellipsis">...</span>
                    <c:forEach var="i" begin="${currentPage - 2}" end="${currentPage + 2}">
                        <c:if test="${i <= totalPages}">
                            <a class="page-button specify-page" page-number="${i}">${i}</a>
                        </c:if>
                    </c:forEach>
                    <span class="page-ellipsis">...</span>
                </c:if>
                <%-- 显示省略号 --%>
            </c:if>

            <%-- 如果总页数小于等于 7 --%>
            <c:if test="${totalPages <= 7}">
                <c:forEach var="i" begin="1" end="${totalPages}">
                    <a class="page-button specify-page" page-number="${i}">${i}</a>
                </c:forEach>
            </c:if>

            <c:if test="${currentPage < totalPages}">
                <a class="page-button next" page-number="${currentPage + 1}">下一页</a>
                <a class="page-button last">尾页</a>
            </c:if>
            <%-- 如果当前页码不是最后一页，则显示“下一页”和“尾页”按钮 --%>
        </div>
    </div>
</div>
<!-- jsp:include导入网页尾部  jsp:param向该页面传值 -->
<jsp:include page="/WEB-INF/page/reception_desk/footer_page.jsp" flush="true">
    <jsp:param name="id" value="1"/>
</jsp:include>
</body>
</html>
